<template>
  <div>
    <h1>绑定class属性</h1>
    <div v-bind:class="classname">绑定class属性</div>
    <div class="box">绑定class属性</div>

    <div :class="[classname, 'box']">绑定class属性</div>
    <div :class="[{ classname: true }, { box: true }]">绑定class属性</div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const classname = "box";
</script>
<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
